“Bladix” Documentation by “TeamXcel” v1.0
“Bladix”
Created:01/06/2018
By: TeamXcel
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Table of Contents
- HTML Structure
- Template Components
- CSS Files and Structure
- JavaScript
- Sources and Credits
- PHP Code Explanation (If your theme uses PHP)
- Flash (If your theme uses Flash)
- API Usage (If your theme uses an API)
- Any additional unique features that need an overview
A) HTML Structure - top
Below is the general HTML structure of the landing page.
1) index.html File Structure - top
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="TeamXcel">
<title>Bladix || Construction & Building Html Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Slick Nav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Css Animation CSS -->
<link rel="stylesheet" href="css/css-animation.min.css">
<!-- Nivo Slider CSS -->
<link rel="stylesheet" href="css/nivo-slider.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div>
<section id="header" class="header-section">
</section><!-- /Header Section -->
<section class="slider-section">
</section><!-- /#slider-Section -->
<section class="cta-section-2 bd-bottom">
</section><!-- /.cta_section_2 -->
<section class="about-section bd-bottom padding">
</section><!-- /About Section -->
<section class="service-section bg-grey bd-bottom padding">
</section><!-- /Service Section -->
<section id="counter" class="counter-section">
</section><!-- Counter Section -->
<section class="project-section bg-grey bd-bottom padding">
</section><!-- Project Section -->
<section class="testimonial-section bd-bottom padding">
</section><!-- Testimonial Section -->
<section class="cta-section">
</section><!-- CTA Section -->
<section class="blog-section bg-grey bd-bottom padding">
</section><!-- /Blog Section -->
<div class="sponsor-section bd-bottom">
</div><!-- ./Sponsor Section -->
<section class="widget-section padding">
</section><!-- ./Widget Section -->
<footer class="footer-section">
</footer><!-- /Footer Section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Imagesloaded JS -->
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- isotope JS -->
<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Counterup JS -->
<script src="js/vendor/jquery.counterup.min.js"></script>
<!-- waypoints js -->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Slick Nav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- Nivo Slider JS -->
<script src="js/vendor/jquery.nivo.slider.pack.js"></script>
<!-- Letter Animation JS -->
<script src="js/vendor/letteranimation.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Contact JS -->
<script src="js/contact.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
B) Template Components - top
The site is made of many sections like header, slider, testimonials, services and more...
1) Header Section - top
<section id="header" class="header-section"> <div class="container"> <div class="top-header row"> <div class="col-md-6"> <div class="top-left"> <ul class="info"> <li><i class="ti-location-pin"></i>Tottenham Road, London, England.</li> </ul> </div> </div> <div class="col-md-6 right"> <div class="top-right text-right"> <ul class="info"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div> </div><!-- /Top Header --> <div class="menu-wrap row"> <div class="col-md-3"> <div class="site-branding"> <a href=""><img src="img/logo.png" alt="brand"></a> </div> </div> <div class="col-md-9"> <ul id="mainmenu" class="nav-menu"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Service</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="blog-grid.html">Blog</a> <ul> <li><a href="blog-grid.html">Blog Grid</a></li> <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div class="bottom-header row"> <div class="col-md-6"> <div class="bottom-left"> <p>Construction and Building Company</p> </div> </div> <div class="col-md-6 right"> <div class="bottom-right"> <p><i class="ti-email"></i>contact@yourdomain.com</p> </div> </div> </div><!-- /Bottom Header --> </div> </section><!-- /Header Section -->
2) Slider Section - top
<section class="slider-section"> <div class="slider-wrapper"> <div id="main-slider" class="nivoSlider"> <img src="img/slider-1.jpg" alt="" title="#slider-caption-1"/> <img src="img/slider-2.jpg" alt="" title="#slider-caption-2"/> <img src="img/slider-3.jpg" alt="" title="#slider-caption-3"/> </div><!-- /#main-slider --> <div id="slider-caption-1" class="nivo-html-caption slider-caption"> <div class="display-table"> <div class="table-cell"> <div class="container"> <div class="slider-text"> <h1 class="wow cssanimation fadeInBottom">Costruction kings</h1> <h1 class="wow cssanimation fadeInTop">Building up great things!</h1> <p class="wow cssanimation fadeInTop" data-wow-delay="1s">We offer free consulting project management.</p> <a href="#" class="default-btn wow cssanimation fadeInBottom" data-wow-delay="0.8s">Explore Now</a> <a href="#" class="default-btn wow cssanimation fadeInBottom" data-wow-delay="0.8s">Learn More</a> </div> </div> </div> </div> </div> <!-- /#slider-caption-1 --> </div> </section><!-- /#slider-Section -->
3) CTA Section - top
<section class="cta-section-2 bd-bottom"> <div class="container"> <div class="row"> <div class="col-sm-8"> <div class="cta-content"> <h2>We provide world class construction services.</h2> <p>Lorem Ipsum is simply dummy text of the printing and industry.</p> </div> </div> <div class="col-sm-4 xs-padding"> <a href="#" class="default-btn">Contact With Us</a> </div> </div> </div> </section><!-- /.cta_section_2 -->
4) About Section - top
<section class="about-section bd-bottom padding"> <div class="container"> <div class="row about-wrap"> <div class="col-12 col-md-8"> <div class="about-content"> <h2>We help customers built World <br> Class Construction Projects Since 1970</h2> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <a href="#" class="default-btn">More About Us</a> </div> </div> <div class="col-4"> <img src="img/about.png" alt="about"> </div> </div> </div> </section><!-- /About Section -->
4) Services Section - top
DiscoverOur Services
PROJECT MANAGEMENT
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Read More
CONCRETE TRANSPORT
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Read More
BUILDING RENOVATION
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Read More
5) Counter Section - top
<section id="counter" class="counter-section"> <div class="container"> <ul class="row counters"> <li class="col-md-3 col-sm-6 sm-padding"> <div class="counter-content"> <i class="ti-money"></i> <h3 class="counter">85389</h3> <h4 class="text-white">Money Donated</h4> </div> </li> </ul> </div> </section><!-- Counter Section -->
6) Project Section - top
<section class="project-section bg-grey bd-bottom padding"> <div class="container"> <div class="row align-items-center mb-40"> <div class="col-12 col-md-5"> <div class="section-heading"> <h2><span>Works</span>Latest Projects</h2> </div> </div> <div class="col-12 col-md-7"> <ul class="project-filter text-right"> <li class="active" data-filter="*">All</li> <li data-filter=".construction">Construction</li> <li data-filter=".building">Building</li> <li data-filter=".industries">Industries</li> <li data-filter=".material">Material</li> </ul><!-- /.Project filter --> </div> </div> <div class="row project-wrapper"> <div class="col-lg-4 col-sm-6 single-item construction building"> <div class="project-wrap"> <div class="project-img"> <img src="img/project-1.jpg" alt="project"> <div class="hover"> <a class="img-popup" data-gall="projectimg" href="img/project-1.jpg"><i class="ti-image"></i></a> </div> </div> <div class="footer"> <a href="#">Project Description</a> <p>Lorem Ipsum is simply dummy text of the printing!</p> </div> </div> </div><!-- /project-1 --> </div> </div> </section><!-- Project Section -->
7) Testimonial Section - top
<section class="testimonial-section bd-bottom padding"> <div class="container"> <div class="section-heading mb-40"> <h2><span>Testimonial</span>What People Say</h2> </div> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testimonial-item"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <div class="testi-footer"> <img src="img/testimonial-1.jpg" alt="profile"> <h4>Jonathan Smith <span>Marketer</span></h4> </div> </div> </div> </div> </section><!-- Testimonial Section -->
8)CTA Section - top
<section class="cta-section"> <div class="container"> <div class="cta-content"> <h2>We Provide Best <br>Construction Services!</h2> <p>We offer free consulting and the best project management <br>for your ideas, 100% delivery guaranteed.</p> <a href="#" class="default-btn">Book Us Now</a> </div> </div> </section><!-- CTA Section -->
9)Blog Section - top
<section class="blog-section bg-grey bd-bottom padding"> <div class="container"> <div class="row"> <div class="col-lg-12 xs-padding"> <div class="blog-items grid-list row"> <div class="col-md-4 padding-15"> <div class="blog-post"> <img src="img/services-1.jpg" alt="blog post"> <div class="blog-content"> <span class="date"><i class="fa fa-clock-o"></i> January 01.2018</span> <h3><a href="#">Standard gallery post</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a href="#" class="post-meta">Read More</a> </div> </div> </div><!-- Post 1 --> </div> </div><!-- Blog Posts --> </div> </div> </section><!-- /Blog Section -->
10) Sponsor Section - top
<div class="sponsor-section bd-bottom"> <div class="container"> <ul id="sponsor-carousel" class="sponsor-items owl-carousel"> <li class="sponsor-item"> <img src="img/sponsor-1.png" alt="sponsor-image"> </li> </ul> </div> </div><!-- ./Sponsor Section -->
11) Widget Section - top
<section class="widget-section padding"> <div class="container"> <div class="widget-wrap row"> <div class="col-md-4 xs-padding"> <div class="widget-content"> <img src="img/logo-footer.png" alt="logo"> <p>Lorem Ipsum is simply dummy printing and industry. It has survived not only five centuries, but also the leap electronic type essentially unchanged.</p> <ul class="social-icon"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> </div> </div> <div class="col-md-4 xs-padding"> <div class="widget-content"> <h3>Recent Projects</h3> <ul class="widget-link"> <li><a href="#">First charity activity of this summer. <span>-1 Year Ago</span></a></li> <li><a href="#">Big charity: build school for poor children. <span>-2 Year Ago</span></a></li> </ul> </div> </div> <div class="col-md-4 xs-padding"> <div class="widget-content"> <h3>Bladix Location</h3> <ul class="address"> <li><i class="ti-email"></i> Info@YourDomain.com</li> </ul> </div> </div> </div> </div> </section><!-- ./Widget Section -->
12) Footer Section - top
<footer class="footer-section"> <div class="container"> <div class="row"> <div class="col"> <div class="copyright">© 2018 Bladix Powered by TeamXcel</div> </div> <div class="col"> <ul class="footer-social"> <li><a href="#">Orders</a></li> <li><a href="#">Terms</a></li> <li><a href="#">Report Problem</a></li> </ul> </div> </div> </div> </footer><!-- /Footer Section -->
C) CSS Files and Structure - top
These are the css files:
- bootstrap.min.css
- animate.min.css
- elegant-font-icons.css
- elegant-line-icons.css
- owl.carousel.css
- main.css
- responsive.css
D) JavaScript - top
This theme use these Javascript files:
- jQuery
jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:bootstrap.min.js smooth-scroll.min.js owl.carousel.min.js jquery.ajaxchimp.min.js jquery-1.12.4.min.js jquery.mb.YTPlayer.min.js owl.carousel.min.js venobox.min.js wow.min.js jquery.counterup.min.js main.jsYou can edit the contact.js files. for setting contact form
F) Sources and Credits - top
G) PHP Code Explanation - top
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel